import { Directive, ElementRef, Input, HostListener } from "@angular/core";

@Directive({
  selector: "[nHighlight]"
})
export class HighlightDirective {
  @Input("nHighlight") highlightColor: string;
  @Input() defaultColor: string;

  @HostListener("mouseenter") onMouseenter() {
    this.highlight(this.highlightColor || this.defaultColor || "teal");
  }

  @HostListener("mouseleave") onMouseLeave() {
    this.highlight(null);
  }

  constructor(private elementRef: ElementRef) {}

  private highlight(color: string) {
    this.elementRef.nativeElement.style.backgroundColor = color;
  }
}
